<script setup lang="ts">
import {ref} from 'vue'
  // 不可以在setup中使用this，this是undefined

  // 数据，之前在data中，此时数据还不是响应式的，不可以修改，修改后页面不会显示但日志显示已经更新
  let name = ref('优医视觉')
  let age = ref(1)
  let tel = '13888888888'
  const leader = ref('javaPang') //let可以修改；const不能被修改，相当于final

  // 方法，之前在method中
  function changeName() {
    console.log(1)
    name.value = 'YouYiShiJue'
    console.log(name.value)
  }

  function changeAge() {
    console.log(2)
    age.value += 1
    console.log(age.value)
  }

  function showTel() {
    console.log(3)
    alert(tel)

  }
  //返回，相当于一个键值对，键(setup外面使用):值(setup里面使用)
  //return {name: name, age: age, tel :tel}
  //简写方式，如果不返回，则接收不到
  // return {name, age, changeName, changeAge, showTel}

  //setup的返回值也可以是一个渲染函数
  //return ()=>'哈哈'
</script>

<template>
  <div class="person">
    <h2>公司名称:{{name}}</h2>
    <h2>成立年限:{{age}}</h2>
    <h2>公司领导:{{leader}}</h2>
    <button @click = "changeName">修改名称</button>
    <button @click = "changeAge">修改年限</button>
    <button @click = "showTel">查看联系方式</button>
  </div>
</template>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }

  button {
    margin: 0 5px;
  }
</style>